<script setup lang="ts">
import type { Reactive } from 'vue';
import Id from '../setting/user/[id].vue';

const pageTitleName = ref("")
const route = useRoute()
const router = useRouter()

interface userInter{
    id:string | string[],
    name: string,
    account: string,
    password: string,

}

//用户详情
interface AnimeInter{
    aid:number,
    name:string,
    detail:string,//简介
    image:string, //封面
    url:string//路径
}
interface userMesInter{
    id:string,
    name:string,
    isVip:boolean,
    loveAnime:Array<AnimeInter>
}

useHead({
    title:pageTitleName.value + '的空间'
})
const userReactive:Reactive<userInter> = reactive({
    id: route.params.id,
    name: '' as '',
    account: '' as '',
    password: '' as ''
})
const userMesReactive:Reactive<userMesInter> = reactive({
    id:'' as '',
    name:'' as '',
    isVip:false,
    loveAnime:[]

})

onMounted(async ()=>{
    console.log(route.params)
    if(route.params.id == 'undefined'){
        router.back();
    }
    userReactive.id = await route.params.id
    const response1 = await fetch('/api/selectUserByID',{
        method:"POST",
        body:JSON.stringify(userReactive),
        headers:{
            'Content-Type':"application/json"
        }
    }).then(res=>{return res.json()}).then(async data=> {
        // console.log(data)
        pageTitleName.value = await data.data.name
        userReactive.name = await data.data.name
        userReactive.account = await data.data.account
        userReactive.password = await data.data.password
  })

  //添加用户数据(页面初始化时就会查看数据库中是否有值)
  const response2 = await fetch('/api/insertUserMes',{
    method: "POST",
    body:JSON.stringify(userReactive),
    headers:{
        'Content-Type':"application/json"
    }
  }).then(res=>{return res.json()}).then(async data=> {
    // console.log(data) 
    userMesReactive.id = await data.data.id
    userMesReactive.name = await data.data.name
    userMesReactive.isVip = await data.data.isVip
    userMesReactive.loveAnime = await data.data.loveAnime
  })
  const response3 = await fetch('/api/select/selectUserMes',{
    method: "POST",
    body:JSON.stringify(userMesReactive),
    headers:{
        'Content-Type':"application/json"
    }
  }).then(res=>{return res.json()}).then(async data=> {
    console.log(data) 
  })


})

function updateUserPage(){
    router.push(`/setting/user/${userReactive.id}`)
}

//模拟充值会员(改变isVip值)
function Shopping(){
    fetch('/api/update/shopping_vip',{
        method: "POST",
        // body:JSON.stringify({isVip:userMesReactive.isVip}),
        body:JSON.stringify({id:userMesReactive.id,isVip:true}),
        headers:{
            'Content-Type':"application/json"
        }
    }).then(res=>{return res.json()}).then(async data=>{
        console.log(data)
    })
}
function returnBtn(){
    fetch('/api/update/shopping_vip',{
        method: "POST",
        // body:JSON.stringify({isVip:userMesReactive.isVip}),
        body:JSON.stringify({id:userMesReactive.id,isVip:false}),
        headers:{
            'Content-Type':"application/json"
        }
    }).then(res=>{return res.json()}).then(async data=>{
        console.log(data)
    })
}
</script>

<template>
    <div>
        <div>{{ userReactive.name }}</div>
        <div>你的uid: {{ userReactive.id }}</div>
        <button @click="updateUserPage()">更改用户名</button>
        <div>你的会员:{{userMesReactive.isVip? '会员':'不是会员'}}</div>
        <button @click="Shopping">充钱</button><button @click="returnBtn">退回</button>
    </div>
</template>

<style scoped>

</style>